<template>
	<view>
		<view class="shop_t">
			<view @click="change(0)" :class="params.systemFlag == 0?'ats':'ts'">
				<view class="">
					官方消息
				</view>
			</view>
			<view @click="change(1)" :class="params.systemFlag == 1?'ats':'ts'">
				<view class="flex_b">
					评论和赞<view class="tip" v-if="count>0">{{count}}</view>
				</view>
			</view>
		</view>
		<view class="list1" v-if="params.systemFlag==0">
			<view class="items" v-for="(item,index) in ulist" :key="index">
				<view class="time">{{item.createTime}}</view>
				<view class="i_flex">
					<view class="img">
						<image src="../static/user/m1.png" mode=""></image>
					</view>
					<view class="test">
						<view class="t1">小薅官方事务所</view>
						<view class="t2">{{item.content}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<view class="typeflex">
				<view class="ite" :class="params.sendType==item.status?'iteact':''" v-for="(item,index) in typelist"
					:key="index" @click="changty(item)">
					{{item.name}}
				</view>
			</view>
			<view class="ulist">
				<!-- 点赞 -->
				<view class="items" v-for="(item,index) in ulist" :key="index">
					<view class="items_t">
						<view class="flex_b">
							<image :src="item.sendUserHead?item.sendUserHead:'/static/toux.png'" mode=""></image>
							<view class="" style="margin-left: 20rpx;">
								<view class="uname">{{item.sendUserName}}</view>
								<view class="utime">{{item.createTime}}</view>
							</view>
						</view>
						<view class="hf" v-if="item.sendType==2" @click="pageperComment(item)">
							回复
						</view>
					</view>
					<view class="test">
						<span v-if="item.sendType == 1">赞了这条评论</span>
						<span v-else>
							<view class="" v-if="item.receiveUserSendLevel == 1">
								{{item.sendContent}}
							</view>
							<view class="" v-else>
								<span class="s1">回复</span>{{item.receiveUserName}}：{{item.sendContent}}
							</view>
						</span>
					</view>
					<view class="items_b">
						<view class="texts" v-if="item.sendType!=1 && item.receiveUserSendLevel == 2">
							{{item.receiveUserName}}：
							<span>{{item.receiveUserSendContent}}</span>
						</view>
						<view class="items_b_flex">
							<image :src="item.productImg" mode="aspectFill"></image>
							<view class="" style="margin-left: 12rpx;">
								<view class="t1">{{item.shopName}}</view>
								<view class="t2">{{item.productName}}({{item.productCount}}份)
									￥{{item.productPrice}} <span>￥{{item.productPriceOld}}</span></view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		<view class="" style="height: 100rpx;">
			
		</view>
		<view class="kong" v-if="nolist">
			<view class="">
				<image src="/static/xkong.png" mode=""></image>
				<view class="ts">
					尚无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		customerMsgList,
		customerMsg,
		messageList
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				typelist: [{
						status: '',
						name: '全部'
					},
					{
						status: 1,
						name: '点赞'
					},
					{
						status: 2,
						name: '评论'
					}
				],
				params: {
					systemFlag: 0,
					sendType: '',
					pageNum: 1,
					pageSize: 10
				},
				ulist: [],
				count: 0,
				nolist:false,
				
				// systemFlag：0平台 1非平台
				// sendType：发送类型：1点赞 2评论 0平台消息
			};
		},
		onLoad() {
			this.getlist()
			customerMsg({
				systemFlag: 1
			}).then(res => {
				this.count = res.data
			})
		},
		onReachBottom() {
			this.params.pageNum++
			if(this.params.systemFlag == 0){
				messageList(this.params).then(res => {
					this.ulist.push(...res.rows)
					let total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = total == 0
					if (this.params.pageNum > 1 && this.ulist.length == res.total) {
						uni.showToast({
							title: '已加载全部',
							icon: 'none'
						})
					}
				})
			}else{
				customerMsgList(this.params).then(res => {
					this.ulist.push(...res.rows)
					let total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = total == 0
					if (this.params.pageNum > 1 && this.ulist.length == res.total) {
						uni.showToast({
							title: '已加载全部',
							icon: 'none'
						})
					}
				})
			}
			
			
		},
		methods: {
			getlist() {
				if(this.params.systemFlag == 0){
					messageList(this.params).then(res => {
						this.ulist = res.rows
						let total = Math.ceil(res.total / this.params.pageSize);
						this.nolist = total == 0
					})
				}else{
					customerMsgList(this.params).then(res => {
						this.ulist = res.rows
						let total = Math.ceil(res.total / this.params.pageSize);
						this.nolist = total == 0
					})
				}
				
			},
			changty(item) {
				this.params.sendType = item.status
				this.params.pageNum = 1
				this.ulist = []
				this.getlist()
			},
			//头部切换
			change(type) {
				if (type == 1) {
					this.count = 0
				}
				this.params.systemFlag = type
				this.params.pageNum = 1
				this.ulist = []
				this.getlist()
			},
			pageperComment(item) {
				uni.navigateTo({
					url: `/mainpage/perComment?id=${item.commentId}`
				})
			},


		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.kong {
		width: 100%;
		margin: 230rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		image {
			width: 228rpx;
			height: 228rpx;
		}

		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
			margin-top: 20rpx;
		}
	}

	.shop_t {
		display: flex;
		background: #fff;
		padding-top: 10rpx;
		position: sticky;
		top: 0%;
		z-index: 9;
		align-items: center;

		.ts {
			width: 50%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			padding-bottom: 20rpx;
			border-bottom: 2px solid #E6E6E6;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.ats {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			padding-bottom: 20rpx;
			border-bottom: 2px solid #000000;
		}
	}

	.list1 {
		.items {
			padding: 20rpx;
			box-sizing: border-box;

			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #979797;
				text-align: center;
				margin: 15rpx auto;
			}

			.i_flex {
				display: flex;

				.img {
					width: 100rpx;
					height: 100rpx;
					background: #F3F3F3;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 68rpx;
						height: 68rpx;
					}
				}

				.test {
					margin-left: 20rpx;
					flex: 1;
				}

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
				}

				.t2 {
					margin-top: 15rpx;
					background: #fff;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #979797;
					padding: 10rpx;
					box-sizing: border-box;
				}
			}
		}
	}

	.typeflex {
		display: flex;
		padding: 20rpx;
		box-sizing: border-box;
		position: sticky;
		top: 76rpx;
		background: #FBFBFB;

		.ite {
			width: 120rpx;
			height: 60rpx;
			background: #F3F3F3;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			text-align: center;
			margin-right: 30rpx;
			line-height: 60rpx;
		}

		.iteact {
			background: #000000;
			color: #ffffff;
		}

	}

	.ulist {
		.items {
			padding: 40rpx 20rpx;
			background: #fff;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.items_t {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.hf {
					width: 100rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 100rpx 100rpx 100rpx 100rpx;
					border: 1rpx solid #D9D9D9;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #979797;
					text-align: center;
					line-height: 60rpx;
				}

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
				}

				.uname {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}

				.utime {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #979797;
					margin-top: 8rpx;
				}
			}

			.test {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				margin: 6rpx auto 12rpx;

				.s1 {
					color: #CE7034;
				}
			}

			.items_b {
				width: 710rpx;
				background: #FBFBFB;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.texts {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					margin-bottom: 20rpx;

					span {
						word-break: break-all;
					}
				}

				.items_b_flex {
					display: flex;
				}

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}

				.t2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					margin-top: 10rpx;

					span {
						color: #D1CDCD;
						text-decoration: line-through;
					}
				}
			}
		}
	}
</style>